<template>
    <div class="app flex " v-loading="requestTodo.loading">
        <div class="flex-1">
            <div class="mb-2 flex">
                <x-input v-model="requestTodo.search" class="flex-1" />
            </div>
            <div v-if="requestTodo.error" class="bg-red-600 text-white p-5 shadow-sm">
                {{ requestTodo.error }}
            </div>
            <div v-for="todo in requestTodo.todos" :key="todo.id" class="flex mb-3 ">
                <x-input v-model="todo.title" class="flex-1" />
                <x-button is-del @click="delTodo(todo.id)">删除 </x-button>
                <x-button>编辑 </x-button>
            </div>
            <div class="p-3 bg-pink-600 text-white mt-3">共有{{ requestTodo.todoCount }} 个任务</div>

            <div class="mt-3">
                <x-button class="px-3 py-2" @click="postRequest.showForm = true">添加</x-button>
            </div>
        </div>

        <div class="bg-gray-300 ml-2 p-3" v-if="postRequest.showForm" v-loading="postRequest.loading">
            <h2 class="mb-2 ">设置任务</h2>
            <x-input class="" v-model="postRequest.form.title" />

            <div class="flex h-10 mt-3">
                <x-button @click="add">保存提交</x-button>
                <x-button @click="postRequest.showForm = false" isDel>取消关闭</x-button>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, watch, reactive } from 'vue'
import XInput from '@/components/Input.vue'
import XButton from '@/components/Button.vue'
import RequestTodo from '@/uses/requestTodo'
import todoPost from '@/uses/todoPost'

export default {
    components: { XInput, XButton },
    setup() {
        const requestTodo = reactive(RequestTodo())
        const postRequest = reactive(todoPost())

        const add = () => {
            postRequest.store()
        }

        //删除
        const delTodo = id => {
            fetch(`http://localhost:3002/todos/${id}`, { method: 'DELETE' }).then(_ => {
                requestTodo.load()
            })
        }

        return { requestTodo, delTodo, postRequest, add }
    }
}
</script>

<style lang="scss">
.app {
    width: 60vw;
    margin: 0 auto;
    margin-top: 10vh;
    background-color: #f39c12;
    @apply p-5;
}
</style>
